yQRCode

Description

The yQRCode is a scannable code typically used for storing URLs or other information for reading by the camera on a smartphone. The yQRCode is versatile and can be used for:

• Directing users to websites quickly
• Simplifying the check-in process at events
• Sharing Wi-Fi credentials effortlessly

Basic Structure

The basic structure of the yQRCode includes customizable options such as the QR code's color, size, and the actual data encoded within it. For the general structure of a yComponent, refer to the YBase-components basic-structure.

Properties

Through its various properties the yQRCode can be configured to suit your needs. The display below provides you with an overview of all the yQRCode properties.

Properties can be changed directly through three methods:

• Inside the Toolbar, which is positioned in your workarea next to your component where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
• It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for most used properties.
• Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.

Generic

METAread more

Name: componentId

Not Editable

Number Property

--y-q-r-code__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

--y-q-r-code__component-type

The type of the component. For this component it is -q-r-code.

Name: name

String Property

--y-q-r-code__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

--y-q-r-code__version

The custom version of the QRCode-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

--y-q-r-code__core-theme

The CoreTheme, which will be apllied to the QRCode. For further information on themes visit the themes page.

Name: subTheme

String Property

--y-q-r-code__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the QRCode. For further information on themes visit the themes page.

Name: groupTheme

String Property

--y-q-r-code__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

String Property

--y-q-r-code__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

Not Editable

String Property

--y-q-r-code__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

String Property

--y-q-r-code__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

--y-q-r-code__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

--y-q-r-code__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

--y-q-r-code__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

--y-q-r-code__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

--y-q-r-code__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

--y-q-r-code__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

String Property

--y-q-r-code__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

--y-q-r-code__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

--y-q-r-code__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

--y-q-r-code__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

--y-q-r-code__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

--y-q-r-code__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

--y-q-r-code__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

--y-q-r-code__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

--y-q-r-code__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

--y-q-r-code__bg-color

--y-q-r-code__bg-color__normal

--y-q-r-code__bg-color__hover

The color of the background. This can be set as a color from a palette or a custom hex color.

BORDERread more

Name: borderTopColor

Injectable

Color Property

--y-q-r-code__border-top-color

--y-q-r-code__border-top-color__normal

--y-q-r-code__border-top-color__hover

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

String Property

--y-q-r-code__border-top-style

--y-q-r-code__border-top-style__normal

--y-q-r-code__border-top-style__hover

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

--y-q-r-code__border-top-width

--y-q-r-code__border-top-width__normal

--y-q-r-code__border-top-width__hover

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

--y-q-r-code__border-right-color

--y-q-r-code__border-right-color__normal

--y-q-r-code__border-right-color__hover

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

String Property

--y-q-r-code__border-right-style

--y-q-r-code__border-right-style__normal

--y-q-r-code__border-right-style__hover

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

--y-q-r-code__border-right-width

--y-q-r-code__border-right-width__normal

--y-q-r-code__border-right-width__hover

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

--y-q-r-code__border-bottom-color

--y-q-r-code__border-bottom-color__normal

--y-q-r-code__border-bottom-color__hover

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

String Property

--y-q-r-code__border-bottom-style

--y-q-r-code__border-bottom-style__normal

--y-q-r-code__border-bottom-style__hover

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

--y-q-r-code__border-bottom-width

--y-q-r-code__border-bottom-width__normal

--y-q-r-code__border-bottom-width__hover

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

--y-q-r-code__border-left-color

--y-q-r-code__border-left-color__normal

--y-q-r-code__border-left-color__hover

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

String Property

--y-q-r-code__border-left-style

--y-q-r-code__border-left-style__normal

--y-q-r-code__border-left-style__hover

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

--y-q-r-code__border-left-width

--y-q-r-code__border-left-width__normal

--y-q-r-code__border-left-width__hover

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

--y-q-r-code__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

Injectable

String Property

--y-q-r-code__box-shadow

--y-q-r-code__box-shadow__normal

--y-q-r-code__box-shadow__hover

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

--y-q-r-code__opacity

--y-q-r-code__opacity__normal

--y-q-r-code__opacity__hover

The opacity of all colored parts of the component. This value is set in percent.

CODEread more

Name: code__value

String Property

--y-q-r-code__code__value

Lorem Ipsum ???

Name: code__level

String Property

--y-q-r-code__code__level

Lorem Ipsum ???

Name: code__color

Color Property

--y-q-r-code__code__color

Lorem Ipsum ???

Links

QRCODEread more

Name: qrCodeSrc

String Property

--y-q-r-code__qr-code-src

The source where the qr-code will be loaded from. ???

Usage

In this section you'll find a collection of application scenarios and examples that illustrate how to leverage the yQRCode in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations

Elevated

genericarrow_forward_iossizearrow_forward_iosminWidth120px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosshadowarrow_forward_iosboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioscodearrow_forward_ioscode__color#FFFFFF

Flat

genericarrow_forward_iossizearrow_forward_iosminWidth120px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioscodearrow_forward_ioscode__color#FFFFFF

Outlined

genericarrow_forward_iossizearrow_forward_iosminWidth120px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normaltransparent

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioscodearrow_forward_ioscode__color#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderStyleTop__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleRight__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleBottom__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleLeft__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderWidthTop__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthRight__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthBottom__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthLeft__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderColorTop__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorRight__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorBottom__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorLeft__normal#44ddbb

Rounded

genericarrow_forward_iossizearrow_forward_iosminWidth120px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosshadowarrow_forward_iosboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)

stylearrow_forward_iosborderarrow_forward_iosborderRadius20px

stylearrow_forward_ioscodearrow_forward_ioscode__color#FFFFFF

Plain

genericarrow_forward_iossizearrow_forward_iosminWidth120px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normaltransparent

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioscodearrow_forward_ioscode__color#44ddbb

Style Variations

Red QR Code

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor#FF0000

stylearrow_forward_ioscodearrow_forward_ioscode__color#FFFFFF

White QR Code

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor#FFFFFF

stylearrow_forward_ioscodearrow_forward_ioscode__color#FF0000

Dynamic Content

The yQRCode also supports dynamic content, where the data encoded in the QR code can be updated in real-time based on user interactions or other events in the application.

Via JavaScript

To set the yQRCode's value using JavaScript, access the value property within the "style" > "code" category. This method is ideal for changing the yQRCode's state based on user interactions or other events within your application.

How to:

Button EvtClicked

// function onButton_1_EvtClicked (apiObject, component, eventData) {

let desiredString = "https://example.com";
let QRComponent = apiObject.ui.getObject(2, "y-qr-code");

QRComponent.set("style", "code", "code__value", desiredString);

//}

Simply replace desiredString with the appropriate string or URL to a website that you would like to encrypt in the QRCode.

In the following more advance code example a yInput named "yInputUrl" is needed and a yQRCode named "yQRCode". The content of the following code example can be run from any function that is triggered inside the page that contains those two components.

Input EvtChanged

// function onInput_1_EvtChanged (apiObject, component, eventData) {
// Retrieve the user input value from an input component
let urlValue = eventData.data;
const qrComponent = apiObject.ui.getObject(2, "y-qr-code");

// Check if the URL is not empty
if (urlValue.trim() !== "") {
  // Update the QR Code component's content
  qrComponent.set("style", "code", "code__value", urlValue);
  console.log("QR Code updated with URL:", urlValue);
} else {
  // Handle empty input, potentially showing an error or alert
  console.error("URL input is empty. QR Code cannot be updated.");
}
//}

Via SourceLink Picker

To link the yQRCode’s value with another component (e.g. a YInput), use the SourceLink Picker. This feature binds the yQRCode’s state to another component's value, allowing for integrated component behavior.

How to:

1. Create a yQRCode component in your application.
2. Create a YInput component in your application.
3. Select the created yQRCode and open the Detail Panel.
4. Within these settings, proceed to the "Links" section and open "QrCode".
5. Create a new sourceLink -> select the YInput you just created and choose input-string as an event.

Now each time you insert a url into the input, the image will render the picture behind this url. You can implement a validation in the YInput to make sure the string is in a format that you want, e.g. a valid URL.

Alternatively you can use the SourceLink Picker in the Toolbar as a Toolbar Extension.

Special Picker

SourceLink Picker

There is a special picker for the yQRCode in the Toolbar as a Toolbar Extension which will be used to link the component to a logic of 2 or more other components. This is a kind of SourceLink Picker, similar to other SourceLink Pickers to be found in other components.